import React, { useEffect, useRef, useState } from 'react'
import { useSize } from 'ahooks';
import { recentSong } from '@/api/recent'
import { getSongDetail, getSongUrl, getLyric } from '@/api/details'
import { setSongInfo } from '../../store/modules/songInfo';
import { Table } from 'antd'
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom'

export default function RecentSong() {
    const size = useSize(document.querySelector('body'));
    const dispatch = useDispatch();
    const playDataRef = useRef({});
    const navigate = useNavigate();
    const [pageSize] = useState(20);
    const [songList, setSongList] = useState([]); //歌曲列表数据

    let songData = []; //请求到的原本的数据

    const columns = [ //表格的每一列
        {
            title: 'id',
            dataIndex: 'songId',
            align: 'right',
            width: 70,
        },
        {
            title: '音乐标题',
            dataIndex: 'name',
            // align: 'center',
        },
        {
            title: '歌手',
            dataIndex: 'singer',
            // align: 'center',
        },
        {
            title: '播放时间',
            dataIndex: 'time',
            // align: 'center',
        }
    ];

    const handleTime = time => { //处理时间戳
        const date = new Date(time);
        const Y = date.getFullYear() + '-';
        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        const D = date.getDate() + ' ';
        return Y + M + D;
    }

    const handleList = () => { //将原始数据进行处理
        const list = [];
        songData.forEach((item, i) => {
            list[i] = {};
            list[i].id = item.resourceId;
            list[i].songId = i + 1;
            const alia = item.data.alia[0] ? `(${item.data.alia[0]})` : '';
            list[i].name = item.data.name + alia;
            list[i].singer = ''
            item.data.ar.forEach((item, index) => {
                if (index === 0) {
                    list[i].singer += item.name;
                } else {
                    list[i].singer += `/${item.name}`;
                }
            })
            list[i].time = handleTime(item.playTime);
        })
        setSongList(l => list);
    }

    const getDetailData = (id) => {
        getSongDetail({ ids: id }).then(res => {
            playDataRef.current = {
                name: res?.data?.songs?.[0]?.al?.name,
                cover: res?.data?.songs?.[0]?.al?.picUrl,
                artist: res?.data?.songs?.[0]?.ar
                    .map((item) => {
                        return item?.name;
                    })
                    .join(","),
            }
        });

        getLyric({ id }).then(res => {
            playDataRef.current = {
                ...playDataRef.current,
                lrc: res.data.lrc.lyric,
            }
        });

        getSongUrl({
            id,
            level: 'standard'
        }).then(res => {
            playDataRef.current = {
                ...playDataRef.current,
                url: res.data.data?.[0].url
            }
            dispatch(setSongInfo(playDataRef.current));
        });
    }

    const getRecentSong = () => {
        recentSong().then(res => {
            songData = res.data.data.list;
            // console.log(songData);
            handleList();
        })
    }

    useEffect(() => {
        getRecentSong();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])


    // getRecentSong();
    return (
        <>
            <Table
                style={{ width: '100%' }}
                dataSource={songList}
                columns={columns}
                rowKey={record => record.songId}
                scroll={{ y: size.height - 332, x: 1200 }}
                pagination={{ pageSize ,showSizeChanger:false }}
                onRow={(record) => {
                    return {
                        onDoubleClick: (e) => { getDetailData(record.id); navigate(`/songs/details/${record.id}`) },
                    };
                }}
            />
        </>
    )
}
